<html>
	<body>
		<style>
			#container {
				background-color: #FFFFFF;

				width: 100%;
				height: 100%;
			}
			#xcontainer {
				background-size: 22px 22px;
				background-image:
				-webkit-repeating-linear-gradient(45deg, rgba(127, 191, 255, .4), rgba(127, 191, 255, .4) 1px, transparent 2px, transparent 15px),
				-webkit-repeating-linear-gradient(-45deg, rgba(255, 182, 193, .4), rgba(255, 182, 193, .4) 1px, transparent 2px, transparent 15px);
				background-image:
				-moz-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 2px, transparent 15px),
				-moz-repeating-linear-gradient(-45deg, rgba(255, 182, 193, .5), rgba(255, 182, 193, .5) 1px, transparent 2px, transparent 15px);
				background-image:
				-o-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 2px, transparent 15px),
				-o-repeating-linear-gradient(-45deg, rgba(255, 182, 193, .5), rgba(255, 182, 193, .5) 1px, transparent 2px, transparent 15px);
				background-image:
				repeating-linear-gradient(45deg, rgba(127, 191, 255, .5), rgba(127, 191, 255, .5) 1px, transparent 2px, transparent 15px),
				repeating-linear-gradient(-45deg, rgba(255, 182, 193, .5), rgba(255, 182, 193, .5) 1px, transparent 2px, transparent 15px);
			}
			.ideaInput {
				position: absolute;
				border: none;
				z-index: 999;
				background-color: transparent;
				color: #F8F8F8;
				font-family: "Helvetica";
				font-weight: bold;
				font-size: 13;
				text-align: center;
				resize: none;
			}
			.ideaInput:focus {
				outline: none;
			}
			#linkEditWidget {
				background-color: yellow;
				z-index: 999;
				display:none;
				position: absolute;
			}
			.active {
				background-color: green;
				color: white;
			}
		</style>

		<input type="button" class="resetView" value="0"></input>
		<input type="button" class="scaleUp" value="+"></input>
		<input type="button" class="scaleDown" value="-"></input>
		<input type="button" class="addSubIdea" value="add"></input>
		<input type="button" class="editNode" value="edit"></input>
		<input type="button" class="removeSubIdea" value="delete"></input>
		<input type="button" class="insertIntermediate" value="insert parent"></input>
		<input type="button" class="toggleCollapse" value="exp/col"></input>
		<input type="button" onclick="mapModel.setInputEnabled(false)" value="disable"></input>
		<input type="button" onclick="mapModel.setInputEnabled(true)" value="enable"></input>
		<input type="button" class="undo" value="undo"></input>
		<input type="button" class="redo" value="redo"></input>
		<input type="button" data-mm-action="export-image" value="Export To Image"/>
		<input type="button" class="cut" value="cut"></input>
		<input type="button" class="copy" value="copy"></input>
		<input type="button" class="paste" value="paste"></input>
		<input type="button" class="openAttachment" value="open attachment"></input>
		<input type="button" class="toggleAddLinkMode" value="add link"></input>
		Background: <input type="text" class='updateStyle' data-mm-target-property='background'></input>
		<div id="linkEditWidget">
			<input class="delete" type="button" value="Delete"></input>
			<select class="color">
				<option value="red">Red</option>
				<option value="blue">Blue</option>
			</select>
			<select class="lineStyle">
				<option value="solid">Solid</option>
				<option value="dashed">Dashed</option>
			</select>
			<button class="arrow">Arrow</button>
		</div>
		<div id="container"></div>
		<script type="text/javascript" src="../lib/jquery-1.9.1.js"></script>
		<script type="text/javascript" src="../lib/jquery.mousewheel-3.1.3.js"></script>
		<script src="../lib/jquery.hotkeys.js"></script>
		<script src="../lib/jquery.hammer.min.js"></script>
		<script type="text/javascript" src="../lib/underscore-1.4.4.js"></script>
		<script type="text/javascript" src="../lib/kinetic-v4.4.3.js"></script>
		<script src="../lib/color-0.4.1.min.js"></script>
		<script type="text/javascript" src="../src/kinetic.clip.js"></script>
		<script type="text/javascript" src="../src/kinetic.idea.js"></script>
		<script type="text/javascript" src="../src/kinetic.idea.proxy.js"></script>
		<script type="text/javascript" src="../src/kinetic.connector.js"></script>
		<script type="text/javascript" src="../src/kinetic.link.js"></script>
		<script type="text/javascript" src="../src/observable.js"></script>
		<script type="text/javascript" src="../src/mapjs.js"></script>
		<script type="text/javascript" src="../src/url-helper.js"></script>
		<script type="text/javascript" src="../src/content.js"></script>
		<script type="text/javascript" src="../src/layout.js"></script>
		<script type="text/javascript" src="../src/layout-compressor.js"></script>
		<script type="text/javascript" src="../src/map-model.js"></script>
		<script type="text/javascript" src="../src/kinetic-mediator.js"></script>
		<script type="text/javascript" src="../src/map-toolbar-widget.js"></script>
		<script type="text/javascript" src="../src/png-exporter.js"></script>
		<script type="text/javascript" src="../src/map-widget.js"></script>
		<script type="text/javascript" src="../src/link-edit-widget.js"></script>
		<script type="text/javascript" src="testtree.js"></script>
		<script>
			jQuery.fn.attachmentEditorWidget = function (mapModel) {
				'use strict';
				return this.each(function () {
					var element = jQuery(this);
					mapModel.addEventListener('attachmentOpened', function (nodeId, attachment) {
						mapModel.setAttachment(
							'attachmentEditorWidget',
							nodeId, {
								contentType: 'text/html',
								content: prompt('attachment', attachment && attachment.content)
							}
						);
					});
				});
			};
			(function () {
				window.onerror = alert;
				var container = jQuery('#container'),
				idea = MAPJS.content(test_tree()),
				isTouch = false,
				renderImages = false,
				mapModel = new MAPJS.MapModel(MAPJS.KineticMediator.layoutCalculator, ['A brilliant idea...', 'A cunning plan...', 'We\'ll be famous...'], ['hoo har']);
				container.mapWidget(console,mapModel, isTouch, renderImages);
				jQuery('body').mapToolbarWidget(mapModel);
				jQuery('body').attachmentEditorWidget(mapModel);
				$("[data-mm-action='export-image']").click(function () {
					MAPJS.pngExport(idea).then(function (url) {
						window.open(url, '_blank');
					});
				});
				mapModel.addEventListener('analytic', console.log.bind(console));
				mapModel.setIdea(idea);
				jQuery('#linkEditWidget').linkEditWidget(mapModel);
				window.mapModel = mapModel;
				jQuery('.arrow').click(function () {
					jQuery(this).toggleClass('active');
				});
			}());
		</script>
	</body>
</html>
